<template>
    <div class="store" @click="gotoStoreDetail(store.id)">
        <img :src="store.img" />

        <div class="store-info-box van-ellipsis">
            <div class="store_name van-ellipsis">
                <b>{{ store.name }}</b>
            </div>

            <div class="sales-info">
                <span class="store-score" style="color:orange">{{ store.score }}分</span>

                <span class="month-sales">月售{{ store.monthSales }}</span>

                <span class="min-price">人均￥{{ store.perCost }}</span>

            </div>

            <div class="price-info">
                <span>
                    <span class="min-price">起送￥{{ store.minPrice }}</span>

                    <span class="shipping-price">配送约￥{{ store.shippingFee }}</span>
                </span>

                <span>
                    <span class="time">
                        <span v-if="store.time / 60 < 1">{{ store.time }}分钟</span>
                        <span v-else>{{ (store.time / 60).toFixed(1) }}小时</span>
                    </span>
                    <span class="distance">

                        <span v-if="store.distance / 1000 < 1">{{ store.distance }}m</span>
                        <span v-else>{{ (store.distance / 1000).toFixed(1) }}km</span>
                    </span>
                </span>
            </div>
            <div class="recommend-store-list " v-if="hasCategoryPath">
                <div class="recommend-store-item" v-for="item in store.commodityList" :key="item.name">
                    <div class="recommoend-store-image">
                        <img :src="item.img" />
                    </div>
                    <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        <span>{{ item.name }}</span>
                    </div>
                    <div>
                        <span class="discount-price">￥{{ item.discountPrice }}</span>
                        <span class="price">￥{{ item.price }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['store', 'hasCategoryPath'],
    methods:{
        gotoStoreDetail(id){
            this.$router.push({name: 'storeDetail', params:{id}})
        }
    }
}
</script>

<style scoped>
.store {
    display: flex;
}

.store img {
    width: auto;
    height: 100px;

    border-radius: 8px;
}

.store-info-box {
    text-align: left;
    margin-left: 10px;

    flex: 1;
}

.store-info-box>div {
    margin-top: 5px;
}

.store-score {
    color: orange;
    font-weight: 1000;
}

.sales-info>span,
.price-info>span>span {
    padding-right: 10px;
    font-size: 12px;

    color: gray;
}

.price-info {
    display: flex;
    justify-content: space-between;
}

.store_name {
    font-size: 18px;
}

.recommend-store-list {
    font-size: 12px;
}

.recommend-store-list .recommend-store-item {
    display: inline-block;

    width: 30%;
    height: 30%;

    margin-right: 5px;
}

.recommend-store-item img {
    width: 100%;
    height: 100%;

    border-radius: 5px;
}

.discount-price{
    color:red;
    font-size:14px;
}

.price{
    text-decoration-line: line-through;
}
</style>